<template>
    <a-card  hoverable >
      <template #cover>
        <!--              <img-->
        <!--                  alt="example"-->
        <!--                  :src="user?.avatar"-->
        <!--              />-->
        <!--            -->
        <div
            :style="{borderRadius:'5px 5px 0 0', height:'200px', backgroundImage: 'linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.5)),url(' + user?.avatar + ')', 'background-repeat':'no-repeat', backgroundSize:'cover',backgroundPosition:'center center'}"
        ></div>
      </template>
      <a-card-meta :title="user?.name" description="This is thethethethethethethethethe description">
        <template #avatar>
          <a-avatar :size="50" :src="user?.avatar" />
        </template>
      </a-card-meta>
      <a-row style="text-align: center;margin-top: 15px">
        <a-col :span="8">
          <a-statistic title="关注"  value-style="font-size: 16px;"  :value="112893"  />
        </a-col>
        <a-col :span="8">
          <a-statistic title="粉丝" value-style="font-size: 16px;" :value="112893" />
        </a-col>
        <a-col :span="8">
          <a-statistic title="文章量"  value-style="font-size: 16px;" :value="112893" />
        </a-col>
      </a-row>
      <template #actions>
        <setting-outlined key="setting" />
        <edit-outlined key="edit" />
        <!--              <ellipsis-outlined key="ellipsis" />-->
        <LogoutOutlined @click="gotoLogout" />
      </template>
    </a-card>
</template>

<script lang="ts">
export default {
  name: "UserInfo",
  props:['user']
}
</script>

<style lang="scss" scoped>

</style>
